<style lang="scss">
.nva-wrap {
  height: 70px;
  position: relative;
}
.default-header {
  position: fixed;
  left: 0;
  top: 0;
  & > div.menu {
    height: 70px;
    border-bottom: 1px solid rgba(179, 187, 193, 0.5);
    transition: all 200ms ease 0s;
  }
  .logo {
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 1px currentColor,
      /*highlight*/ -1px -1px 1px hsl(145, 89%, 67%),
      0 -1px 1px hsl(145, 89%, 67%), 1px -1px 1px hsl(145, 89%, 67%),
      /*light shadow*/ 1px 1px 1px hsl(145, 89%, 50%),
      0 1px 1px hsl(145, 89%, 50%), -1px 1px 1px hsl(145, 89%, 50%),
      /*outline*/ -2px -2px 1px hsl(145, 89%, 30%),
      -1px -2px 1px hsl(145, 89%, 30%), 0 -2px 1px hsl(145, 89%, 30%),
      1px -2px 1px hsl(145, 89%, 30%), 2px -2px 1px hsl(145, 89%, 30%),
      2px -1px 1px hsl(145, 89%, 30%), 2px 0 1px hsl(145, 89%, 30%),
      2px 1px 1px hsl(145, 89%, 30%), -2px 0 1px hsl(145, 89%, 30%),
      -2px -1px 1px hsl(145, 89%, 30%), -2px 1px 1px hsl(145, 89%, 30%),
      /*dark shadow*/ 2px 2px 2px hsl(145, 89%, 15%),
      1px 2px 2px hsl(145, 89%, 15%), 0 2px 2px hsl(145, 89%, 15%),
      -1px 2px 2px hsl(145, 89%, 15%), -2px 2px 2px hsl(145, 89%, 15%);
  }
  .left {
    button {
      font-size: 16px;
      cursor: pointer;
      &:hover {
        color: rgb(19, 180, 82);
      }
      & > span {
        display: inline-block;
        line-height: 24px;
        margin: 15px 0;
      }
    }
  }
  .right {
    .reset {
      font-size: 14px;
      cursor: pointer;
    }
    .register-btn {
      color: #13aa52;
      font-weight: bold;
    }
  }
}
</style>

<template>
  <div class="w-full nva-wrap">
    <nav class="default-header w-full">
      <div class="relative fl fl-justify-between w-full bg-white menu">
        <div class="m-l-30 fl-center left">
          <NuxtLink to="/" class="main-font-color logo m-r-30">
            Web Full Stack
          </NuxtLink>
          <a
            v-for="(item, index) in menuList"
            :key="index"
            href="javascript:void (0)"
            :to="item.url"
            class="nav-font-color"
          >
            <button class="reset m-r-30" @mouseenter="handleMenuEnter">
              <span>{{ item.name }}</span>
            </button>
          </a>
        </div>
        <div class="m-r-30 fl-center right">
          <NuxtLink to="/about" class="nav-font-color">
            <button class="reset m-r-30">
              关于本人
            </button>
          </NuxtLink>
          <NuxtLink to="/register" class="nav-font-color">
            <button class="reset m-r-30 register-btn">
              注册
            </button>
          </NuxtLink>
          <NuxtLink to="/login">
            <button class="btn btn-green">
              登录
            </button>
          </NuxtLink>
        </div>
      </div>
      <detail-menu
        v-model="showSubMenu"
        :style="subMenuStyle"
        @on-visible-change="handleMenuLeave"
      />
    </nav>
  </div>
</template>

<script>
import detailMenu from "./detail-menu"
export default {
  name: "DefaultHeader",
  components: {
    detailMenu
  },
  data() {
    return {
      showSubMenu: false,
      subMenuStyle: {}
    }
  },
  computed: {
    menuList() {
      console.log(this.$store.state.indexMenu)
      return this.$store.state.indexMenu
    }
  },
  mounted() {},
  methods: {
    handleMenuEnter() {
      if (this.showSubMenu) {
        return
      }
      this.showSubMenu = true
      this.subMenuStyle = {
        opacity: 1
      }
    },
    handleMenuLeave(flag) {
      this.showSubMenu = flag
      this.subMenuStyle = {
        pointerEvents: "none",
        opacity: 0
      }
    }
  }
}
</script>
